Apprendre JavaScript en 10 minutes

1 September 2025 — Langage De Programmation

JavaScript est un langage de programmation interprété de haut niveau connu pour sa polyvalence et son utilisation généralisée dans le développement web. Ce tutoriel couvre les fonctionnalités modernes de JavaScript (ES6+) pour vous aider à apprendre rapidement le langage.

1. Écrire votre premier programme JavaScript

Commençons par un programme simple. Créez un fichier nommé hello.js et entrez le code suivant :

console.log("Hello, World!");

Enregistrez le fichier et exécutez la commande suivante dans le terminal ou la ligne de commande :

node hello.js

Ou incluez-le dans un fichier HTML :

<script>
  console.log("Hello, World!");
</script>

La sortie sera :

Hello, World!

Ce programme simple démontre la fonctionnalité de base de sortie de JavaScript. La fonction console.log() est utilisée pour afficher des informations texte dans la console.

2. Syntaxe de base

La syntaxe de JavaScript est similaire à d’autres langages de style C. Elle utilise des points-virgules pour terminer les instructions et des accolades {} pour définir des blocs de code.

// Ceci est un commentaire sur une ligne
console.log("Hello, World!");

/*
Ceci est un commentaire
multi-ligne qui s'étend
sur plusieurs lignes.
*/

Règles de syntaxe de base en JavaScript :

Points-virgules : Optionnels mais recommandés pour terminer les instructions
Commentaires : Les commentaires d’une ligne commencent par //, les multi-lignes par /* */
Sensibilité à la casse : JavaScript est sensible à la casse
Blocs de code : Définis par des accolades {}

3. Variables et types de données

En JavaScript, les variables sont déclarées en utilisant let, const ou var. Le JavaScript moderne préfère let et const.

Déclaration de variables :

let name = "John"; // Variable mutable
const age = 25;     // Constante immuable
var oldWay = "déprécié"; // Évitez d'utiliser var

Principaux types de données en JavaScript :

Number : 42, 3.14, -10
String : "hello", 'world', `template`
Boolean : true, false
Undefined : undefined (variable déclarée mais non assignée)
Null : null (absence intentionnelle de valeur)
Object : {key: "value"}, [1, 2, 3]
Symbol : Symbol("description") (ES6+)
BigInt : 1234567890123456789012345678901234567890n (ES2020+)

3.1 Type Number

JavaScript utilise des nombres à virgule flottante 64 bits pour toutes les valeurs numériques.

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 Type String

Les chaînes peuvent être créées avec des guillemets simples, des guillemets doubles ou des littéraux de modèle.

let single = 'Chaîne avec guillemets simples';
let double = "Chaîne avec guillemets doubles";
let template = `Littéral de modèle`;

// Littéraux de modèle avec interpolation
let name = "Alice";
let greeting = `Bonjour, ${name} !`; // "Bonjour, Alice !"

Opérations sur les chaînes :

let text = "Programmation JavaScript";
console.log(text.length);        // Longueur : 21
console.log(text.toUpperCase()); // "PROGRAMMATION JAVASCRIPT"
console.log(text.toLowerCase()); // "programmation javascript"
console.log(text[0]);            // Premier caractère : "P"
console.log(text.slice(0, 10)); // "Programmat"

3.3 Type Boolean

Le type booléen a deux valeurs : true et false.

let isActive = true;
let isComplete = false;

// Opérations booléennes
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined et Null

undefined signifie qu’une variable a été déclarée mais qu’aucune valeur ne lui a été assignée. null est une absence intentionnelle de toute valeur.

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("Variable non définie");
}

if (empty === null) {
  console.log("Valeur nulle");
}

4. Structures de données

4.1 Array

Les tableaux sont des collections ordonnées et mutables de valeurs.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // Ajouter un élément : [1, 2, 3, 4, 5, 6]
numbers.pop();          // Supprimer le dernier : [1, 2, 3, 4, 5]
numbers.unshift(0);     // Ajouter au début : [0, 1, 2, 3, 4, 5]
numbers.shift();        // Supprimer le premier : [1, 2, 3, 4, 5]
numbers[0] = 10;        // Modifier : [10, 2, 3, 4, 5]

Méthodes de tableau :

let fruits = ["pomme", "banane", "orange"];

// Itération
fruits.forEach(fruit => console.log(fruit));

// Transformation
let lengths = fruits.map(fruit => fruit.length); // [5, 6, 6]

// Filtrage
let longFruits = fruits.filter(fruit => fruit.length > 5); // ["banane", "orange"]

// Recherche
let hasApple = fruits.includes("pomme"); // true
let bananaIndex = fruits.indexOf("banane"); // 1

4.2 Object

Les objets sont des collections de paires clé-valeur.

let person = {
  name: "John",
  age: 30,
  city: "New York",
  isStudent: false
};

// Accéder aux propriétés
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// Ajouter des propriétés
person.country = "USA";
person["occupation"] = "Développeur";

// Supprimer des propriétés
delete person.isStudent;

// Méthodes d'objet
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "New York", "USA", "Développeur"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

Les sets sont des collections de valeurs uniques.

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// Opérations sur les sets
numbers.add(6);       // Ajouter une valeur
numbers.delete(1);    // Supprimer une valeur
numbers.has(2);       // true
numbers.size;         // 5

// Itération
numbers.forEach(num => console.log(num));

4.4 Map

Les maps sont des collections de paires clé-valeur avec n’importe quel type de données comme clé.

let map = new Map();
map.set("name", "Alice");
map.set(1, "numéro un");
map.set(true, "booléen vrai");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// Itération
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. Opérateurs

JavaScript fournit divers opérateurs pour les calculs et les comparaisons.

Arithmétique : +, -, *, /, %, ** (exponentiation)
Comparaison : ==, ===, !=, !==, >, <, >=, <=
Logique : &&, ||, !
Affectation : =, +=, -=, *=, /=, %=
Ternaire : condition ? expr1 : expr2

5.1 Opérateurs arithmétiques

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 Opérateurs de comparaison

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (égalité stricte)
console.log(x != y);    // true
console.log(x !== y);   // true (inégalité stricte)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 Opérateurs logiques

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. Contrôle de flux

6.1 Instructions if

let age = 20;

if (age >= 18) {
  console.log("Adulte");
} else if (age >= 13) {
  console.log("Adolescent");
} else {
  console.log("Enfant");
}

6.2 Instruction switch

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Début de semaine");
    break;
  case "Friday":
    console.log("Presque le week-end");
    break;
  default:
    console.log("Jour normal");
}

6.3 Boucles for

// Boucle for traditionnelle
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// Boucle for...of (tableaux, chaînes)
let fruits = ["pomme", "banane", "orange"];
for (let fruit of fruits) {
  console.log(fruit);
}

// Boucle for...in (propriétés d'objet)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 Boucles while

// Boucle while
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// Boucle do...while
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break et continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Quitter la boucle
  }
  if (i % 2 === 0) {
    continue; // Sauter les nombres pairs
  }
  console.log(i); // 1, 3
}

7. Fonctions

Les fonctions sont des blocs de code réutilisables.

7.1 Déclaration de fonction

function greet(name) {
  return `Bonjour, ${name} !`;
}

console.log(greet("Alice")); // "Bonjour, Alice !"

7.2 Expressions de fonction

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 Fonctions fléchées (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `Bonjour, ${name} !`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "Bonjour, Bob !"

7.4 Paramètres par défaut

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 Paramètres rest

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 Opérateur de décomposition

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "New York"}; // {name: "John", age: 30, city: "New York"}

8. Classes et objets (ES6+)

8.1 Déclaration de classe

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `Je suis ${this.name}, ${this.age} ans`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name} a fêté son anniversaire, maintenant ${this.age} ans`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "Je suis John, 25 ans"
console.log(person.haveBirthday());   // "John a fêté son anniversaire, maintenant 26 ans"

8.2 Héritage

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} fait un bruit`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "Chien");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name} aboie`;
  }

  fetch() {
    return `${this.name} rapporte la balle`;
  }
}

let dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.makeSound()); // "Buddy aboie"
console.log(dog.fetch());     // "Buddy rapporte la balle"

8.3 Getters et Setters

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. JavaScript asynchrone

9.1 Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback("Données reçues");
  }, 1000);
}

fetchData(data => {
  console.log(data); // "Données reçues" après 1 seconde
});

9.2 Promesses

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Données reçues");
      // reject("Erreur survenue");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "Données reçues"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "Données reçues"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Erreur:', error);
  }
}

10. Gestion des erreurs

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("Division par zéro");
  }
  console.log(result);
} catch (error) {
  console.error("Erreur:", error.message);
} finally {
  console.log("Ceci s'exécute toujours");
}

11. Modules (ES6+)

11.1 Exportation

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 Importation

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. Fonctionnalités modernes de JavaScript

12.1 Déstructuration

// Déstructuration de tableau
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// Déstructuration d'objet
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// Déstructuration de paramètres de fonction
function greet({name, age}) {
  return `Bonjour ${name}, vous avez ${age} ans`;
}

12.2 Littéraux de modèle

let name = "Alice";
let age = 25;

// Interpolation basique
let greeting = `Bonjour, ${name} !`;

// Chaînes multi-lignes
let message = `
  Nom: ${name}
  Âge: ${age}
  Statut: ${age >= 18 ? "Adulte" : "Mineur"}
`;

// Évaluation d'expression
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 Chaînage optionnel (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "New York"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "New York"
console.log(user?.employment?.company);     // undefined (pas d'erreur)

12.4 Fusion nulle (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "Inconnu");    // "Inconnu" (chaîne vide est falsy)
console.log(name ?? "Inconnu");    // "" (seulement null/undefined)

console.log(age || 18);           // 18 (0 est falsy)
console.log(age ?? 18);           // 0 (seulement null/undefined)

console.log(city ?? "Inconnu");   // "Inconnu"
console.log(country ?? "USA");    // "USA"

13. Méthodes utiles des tableaux

let numbers = [1, 2, 3, 4, 5];

// map : transformer chaque élément
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter : sélectionner des éléments
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce : accumuler des valeurs
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find : trouver le premier élément correspondant
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some : vérifier si un élément correspond
let hasEven = numbers.some(n => n % 2 === 0); // true

// every : vérifier si tous les éléments correspondent
let allPositive = numbers.every(n => n > 0); // true

// sort : trier les éléments
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. Date et heure

let now = new Date();
console.log(now.toString());      // Date et heure actuelles
console.log(now.getFullYear());   // Année actuelle
console.log(now.getMonth());      // Mois actuel (0-11)
console.log(now.getDate());       // Jour actuel (1-31)
console.log(now.getHours());      // Heure actuelle (0-23)

// Formatage des dates
console.log(now.toLocaleDateString()); // Chaîne de date localisée
console.log(now.toLocaleTimeString()); // Chaîne de temps localisée
console.log(now.toISOString());        // Chaîne au format ISO

// Création de dates spécifiques
let specificDate = new Date(2025, 0, 1); // 1er janvier 2025
let timestamp = new Date(1640995200000); // À partir d'un timestamp

15. Expressions régulières

let text = "Bonjour, mon email est [email protected] et mon téléphone est 123-456-7890";

// Modèle d'email
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// Modèle de téléphone
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// Méthode test
let isValidEmail = emailPattern.test("[email protected]"); // true

// Méthode replace
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScript est un langage puissant et polyvalent qui continue d’évoluer. Ce tutoriel couvre les concepts essentiels pour vous aider à démarrer, mais il y a beaucoup plus à explorer, y compris des sujets avancés comme les générateurs, les proxies et les APIs web.